<html>

<body>
<h1>Test iframe with xhtml</h1>
<script>
  var div = document.createElement('div');
  var iframe = document.createElement('iframe');
  div.appendChild(iframe);
  document.body.appendChild(div);
  
  iframe.onload = function (evt) 
  {
    alert(evt.type + '; target: ' + evt.target + '; currentTarget: ' +
    evt.currentTarget);
    if (evt && evt.currentTarget && evt.currentTarget.contentDocument) 
    {
      var element = evt.currentTarget.contentDocument.documentElement;
      alert('nodeName: ' + element.nodeName + '; namespaceURI: ' +
      element.namespaceURI);
    }
  };
  iframe.src = 'data:application/xhtml+xml,' + [
    '<html xmlns="http://www.w3.org/1999/xhtml">',
    '<head>',
    '<title>Timeline</title>' ,
    '<style>' ,
    'stop.begin { stop-color:yellow; }' ,  
    'stop.end { stop-color:orange; }' ,
    '</style>' ,
    '</head>' ,
    '<body>' ,
    '<h1>Inline SVG demo</h1>' ,
    '<div>' ,
    '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" ' +
    'viewBox="0 0 100 100" ' +
    'style="width:200px; height:200px;">',
    '<linearGradient id="gradient">',
    '<stop class="begin" offset="0%"/>',  
    '<stop class="end" offset="100%"/>',
    '</linearGradient>',
    '<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />',
    '<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />',
    '</svg>',
    '</div>',
    '</body>',
    '</html>'
  ].join('');
</script>

</body>
</html>
